<template>
	<view class="container">
		<!-- <scroll-view scroll-y="true" @scrolltolower="scrolltolower"> -->
		<view class="shoppingCart">
			<!-- 顶部标题 -->
			<view class="shop_top">
				<label class="ckbAll">
					<checkbox style="transform:scale(0.7)" :checked="checkedAll" color="red"
						@click="handleAllChecked" />
				</label>
				<text v-if="!showDel" @click="showDel = !showDel">管理</text>
				<text v-else @click="showDel = !showDel">退出管理</text>
			</view>
			<!-- 购物车非空状态 -->
			<view class="shop_pro" v-if="shoppingCartList.length">
				<view class="pro_item" v-for="(item,i) in shoppingCartList" :key="i">
					<view class="pro_ckb">
						<checkbox :checked="item.isChecked" @click="handleOneChecked(item.id)" color="red"
							style="transform:scale(0.7)" />
					</view>
					<view class="pro_info" @click="goDetail(item.s_good.id)">
						<image :src="item.s_good.s_goods_photos[1].path" mode="widthFix" style="width: 260rpx;">
						</image>
						<view class="pro_text">
							<view class="pro_name">{{item.s_good.name}}</view>
							<view style="line-height: 25px;">
								<text>数量：x{{item.num}}</text>
							</view>
							<view style="line-height:25px;">市场价：<text
									style="color: #999; text-decoration: line-through;">￥{{item.s_good.price}}</text>
							</view>
							<view style="line-height:25px;">店铺价：<text
									style="color:#FF4433;">￥{{item.s_good.sale_price}}</text>
							</view>
						</view>
					</view>
					<view class="pro_del">
						<u-icon name="trash-fill" size="25px" color="red" v-if="showDel" @click="del(item.id)">
						</u-icon>
					</view>
				</view>
			</view>
			<!-- 购物车空状态 -->
			<view class="shop_empty" v-else>
				<!-- <image src="/static/shoppingCart/cartback.png.png" mode="widthFix" style="width: 34%;"></image>
				<view class="text">购物车暂时没有东西</view> -->
				<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" text=' '>
				</u-empty>
				<navigator class="btn" open-type="switchTab" url="/pages/index/index">空空如也，去逛逛~</navigator>
			</view>
			<!-- 结算区域 -->
			<view class="shop_pay" v-if="selectNum">
				<view class="pay_left">
					<text>合计：</text><text style="color:#884E22;font-size: 16px;">￥{{totalPrice.toFixed(2)}}</text>
				</view>
				<view class="pay_right" @click="goSettle">结算({{totalNum}})</view>
			</view>
			<!-- 猜你喜欢 -->
			<view class="shop_like">
				<view class="like_title">猜你喜欢</view>
				<view class="like_list">
					<view class="pro_item" v-for="(item,i) in likeList" :key="i" @click="goDetail(item.id)">
						<image :src="item.s_goods_photos[0].path" mode="widthFix" style="width: 330rpx;">
						</image>
						<view class="pro_center">{{item.name}}</view>
						<view class="pro_bottom">
							<text class="price">￥{{item.sale_price}}</text>
							<text class="sale">销量{{item.sold_num}}笔</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="showModal" title="是否移出购物车" :showCancelButton="true" width="500rpx" negativeTop="50px"
			:closeOnClickOverlay="true" @cancel="close" @close="close" @confirm="confirm">
		</u-modal>
		<tab-bar></tab-bar>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				checkedAll: false,
				showDel: false,
				showModal: false,
				delId: null,
				likeList: []
			}
		},
		computed: {
			...mapState('tabBar', ['value']),
			...mapState('userInfo', ['userInfo']),
			...mapState('cart', ['shoppingCartList']),
			...mapGetters('cart', ['selectNum', 'totalNum', 'totalPrice']),

		},
		onLoad() {
			this.getLikeList()
		},
		onShow() {
			this.changeValue(2)
		},
		onHide() {
			this.showDel = false
		},
		methods: {
			...mapMutations('tabBar', ['changeValue']),
			...mapMutations('cart', ['setshoppingCart', 'allChekced', 'oneChecked']),
			getLikeList() {
				uni.$http.get('/api/goods', {
					project_id: 295,
					limit: 10
				}).then(res => {
					this.likeList = res.data.result.rows
				})
			},
			// 单选
			handleOneChecked(id) {
				this.oneChecked(id)
				this.checkedAll = this.selectNum == this.shoppingCartList.length ? true : false
			},
			// 全选
			handleAllChecked() {
				this.checkedAll = !this.checkedAll
				this.allChekced(this.checkedAll)
			},
			getShoppingCart() {
				if (!this.userInfo) {
					this.setshoppingCart([])
					return;
				}
				uni.$http.get('/api/shoppingCart', {
					project_id: 319
				}).then(res => {
					this.setshoppingCart(res.data.result)
				})
			},
			// 删除按钮
			del(id) {
				this.showModal = true
				this.delId = id
			},
			// 移出购物车取消按钮
			close() {
				this.showModal = false
				this.delId = null
			},
			// 移出购物车确定按钮
			confirm() {
				uni.$http.delete(`/api/shoppingCart/${this.delId}`, {
					project_id: 319
				})
				this.close()
				this.getShoppingCart()
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/detail/detail?id=${id}`
				})
			},
			goSettle() {
				uni.navigateTo({
					url: `/settle/settle`,
					success: () => {
						let data = this.shoppingCartList.filter(ele => ele.isChecked)
						uni.setStorageSync('goodsList', data)
					}
				})
			},
			scrolltolower() {
				console.log('ddd');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shoppingCart {
		padding-bottom: 100px;

		.shop_top {
			height: 40px;
			display: flex;
			align-items: center;
			background-color: #fff;
			justify-content: space-between;
			padding: 0 20rpx;
			font-size: 14px;

			.ckbAll {
				display: flex;
				align-items: center;
			}
		}

		.shop_empty {
			margin: 2px 0 15px;
			padding: 50px 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;

			.text {
				margin: 15px 0 10px;
			}

			.btn {
				width: 40%;
				color: #c0c4cc;
				line-height: 30px;
				text-align: center;
				font-size: 16px;
			}
		}

		.shop_pro {
			display: flex;
			flex-direction: column;
			margin-bottom: 15px;

			.pro_item {
				padding: 15px 20rpx;
				margin-top: 2px;
				background-color: #fff;
				display: flex;
				align-items: center;
				position: relative;

				.pro_ckb {
					padding-right: 14rpx;
				}

				.pro_info {
					display: flex;
					align-items: center;
					flex-grow: 1;

					.pro_text {
						padding-left: 20rpx;
						align-self: flex-end;
						font-size: 14px;

						.pro_name {
							font-size: 16px;
							font-weight: 500;
							margin-bottom: 10px;
						}

						.numberBox {
							display: flex;
							align-items: center;

							.numBtn {
								line-height: 25px;
								padding: 0px 10rpx;
								font-size: 18px;
							}

							.ipt {
								width: 40rpx;
								font-size: 14px;
								text-align: center;
							}
						}
					}
				}

				.pro_del {
					position: absolute;
					right: 5%;
				}
			}
		}

		.shop_pay {
			width: 100%;
			height: 45px;
			display: flex;
			align-items: center;
			background-color: #fff;
			position: fixed;
			bottom: 50px;
			padding-left: 30rpx;
			justify-content: space-between;
			z-index: 999;
			box-sizing: border-box;

			.pay_left {
				font-size: 14px;
			}

			.pay_right {
				padding: 0px 40rpx;
				line-height: 45px;
				color: #fff;
				background-color: #884E22;
				font-size: 14px;
			}
		}

		.shop_like {
			padding: 15px;
			background-color: #fff;

			.like_list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.pro_item {
					margin-top: 15px;
					font-size: 14px;
					box-shadow: 0 5px 10px 0 #dee2e5ff;

					.pro_center {
						padding: 18px 20rpx 5px;
					}

					.pro_bottom {
						position: relative;
						padding: 0 10rpx;

						.price {
							font-weight: 600;
							color: #FF734C;
						}

						.sale {
							color: #999999;
							position: absolute;
							right: 10rpx;
							font-size: 12px
						}
					}
				}
			}
		}
	}
</style>